<template>
    <div class="edit-popup">
        <popup ref="popupRef" title="导入数据" confirmButtonText="提交修改" :async="true" :width="width + 'px'"
            @confirm="handleSubmit" @close="handleClose">
            <div v-loading="loading">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <Upload class="mr-3" type="files" :show-progress="true" @change="change">
                            <el-button type="primary">{{
            excelInfo?.name ? '重新上传' : '点击上传'
        }}</el-button>
                        </Upload>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item label="来源" prop="type">
                            <el-select v-model="formData.type" placeholder="来源">
                                <el-option label="美菜" value="0"></el-option>
                                <el-option label="快驴" value="1"></el-option>
                                <!-- <el-option label="快驴6站区" value="2"></el-option> -->
                                <el-option label="优大集" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div v-if="excelInfo.name">
                    上传完毕：{{ excelInfo.name }}
                    <el-button type="danger" link @click="handleDelete"> 删除 </el-button>
                </div>
                <div v-show="errorList.length > 0">
                    <h2 style="color: red">以下内容未解析成功，请检测对照表是否正确</h2>
                </div>
                <el-table :data="errorList" v-show="errorList.length > 0">
                    <el-table-column label="订单时间" prop="orderTime" show-overflow-tooltip />
                    <el-table-column label="商品名称" prop="goodName" show-overflow-tooltip />
                    <el-table-column label="规格" prop="unit" show-overflow-tooltip />
                    <el-table-column label="下单数量" prop="num" show-overflow-tooltip />
                    <el-table-column label="来源" show-overflow-toolti>
                        <template #default="{ row }">
                            <div>
                                <el-tag :type="row.type == 0 ? '' : 'warning'" effect="dark">{{
            AppTypeMap[row.type]
                                    }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </popup>
    </div>
</template>

<script lang="ts" setup name="skuMappingEdit">
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import { fileDelete } from '@/api/file'
import { apiSkuMeicaiUploadExcel } from '@/api/sku_meicai'
import { AppTypeMap } from '@/enums/skuAPPEnums'

const width = ref(550)
const emit = defineEmits(['success', 'close', 'refresh'])
const errorList = ref([])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const excelInfo = ref({})
const loading = ref(false)
const change = (res: any) => {
    excelInfo.value = res.response.data
}
const formData = ref({
    type: ''
})

// 提交按钮
const handleSubmit = async () => {
    if (!formData.value?.type) {
        feedback.alertError('请选择来源')
        return
    }
    if (!excelInfo.value?.name) {
        feedback.alertError('请先上传对照表')
        return
    }
    const data = {
        url: excelInfo.value?.url,
        type: formData.value.type
    }
    loading.value = true
    await apiSkuMeicaiUploadExcel(data)
        .then((res) => {
            feedback.alertSuccess('处理成功')
            errorList.value = res
            if (res.length > 0) {
                width.value = 850
            }
            refresh()
            excelInfo.value = {}
        })
        .finally(() => {
            loading.value = false
        })
    // console.log('点击提交')
}
// 删除文件
const handleDelete = async () => {
    await feedback.confirm('删除后无法恢复，是否确认删除？')
    const ids = [parseInt(excelInfo.value?.id)]
    del({ ids })
}
const del = (data: any) => {
    fileDelete(data).then(() => {
        clear()
    })
}
//打开弹窗
const open = () => {
    popupRef.value?.open()
}
// 刷新
const refresh = () => {
    emit('refresh', () => { })
}

// 还原
const clear = () => {
    excelInfo.value = {}
    errorList.value = []
}
// 关闭回调
const handleClose = () => {
    clear()
    emit('close')
}

defineExpose({
    open
})
</script>
